<template>
  <div class="view-container register">
    <header class="view-header center">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>登记收文</span>
        </div>
        <div class="header-form">
          <div class="header-form-item">
            <el-button type="success" @click="valid" :loading="saveLoading">保存</el-button>
          </div>
        </div>
      </div>
    </header>
    <section class="section">
      <table border="0" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
          <td class="wen-title">收文标题：</td>
          <td colspan="3">
            <input type="text" v-model.trim="receipt.docTitle">
          </td>
        </tr>
        <tr>
          <td class="wen-title">收文编号：</td>
          <td class="swbh">
            收文<input type="text" v-model.trim="receipt.codeYear"/>
            第 <input type="text" v-model.trim="receipt.codeNo">号
          </td>
          <td class="wen-title">归档分类：</td>
          <td class="select">
            <select v-model="receipt.archiveType">
              <option v-for="item in archiveTypeList" :key="item.pid" :value="item.pname">{{item.pname}}</option>
            </select>
          </td>
        </tr>

        <tr>
          <td class="wen-title">来文号：</td>
          <td class="lai-wen">
            <div class="d1">
              <input type="text" v-model.trim="receipt.codeName">
            </div>
            <div class="d2">
              <select @change="codeNameChange" v-model="help.codeName">
                <option value="">请选择</option>
                <option v-for="item in codeNameList" :key="item.pid" :value="item.pname">{{item.pname}}</option>
              </select>
            </div>

          </td>

          <td class="wen-title">等级：</td>
          <td>
            <select name="" v-model="receipt.docLevel">
              <option v-for="item in docLevelList" :key="item.pid" :value="item.pname">{{item.pname}}</option>
            </select>
          </td>

        </tr>
        <tr>
          <td class="wen-title">来文单位：</td>
          <td>
            <input type="text" v-model.trim="receipt.receiptUnit">
          </td>

          <td class="wen-title">来文类型：</td>
          <td>
            <select name="" v-model="receipt.receiptType">
              <option v-for="item in receiptTypeList" :key="item.pid" :value="item.pname">{{item.pname}}</option>
            </select>
          </td>

        </tr>
        <tr>

          <td class="wen-title">来文日期：</td>
          <td class="riqi">
            <input type="date" v-model.trim="receipt.receiptDate">
          </td>

          <td class="wen-title">保管期限：</td>
          <td>
            <select name="" v-model="receipt.storePeriod">
              <option v-for="item in storePeriodList" :key="item.pid" :value="item.pname">{{item.pname}}</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="4" class="textarea">
            <el-input type="textarea" :rows="8" v-model.trim="receipt.receiptContent"></el-input>
          </td>
        </tr>
        <tr>
          <td>上传附件</td>
          <td colspan="3" class="file-td">
            <div class="upload-wrap">
              <el-upload
                class="upload-demo"
                :action="uploadHost+'/fileUpload/upload?fileType=Receipt'"
                multiple
                :limit="10"
                :before-upload="beforeUpload"
                :on-success="uploadSuccess"
                :file-list="help.uploadFileList">
                <el-button size="small" plain  icon="el-icon-upload">点击上传</el-button>
                <div slot="tip" class="el-upload__tip"><i class="el-icon-warning"></i>单个文件大小请勿超过2MB</div>
              </el-upload>
              <!--<p><i class="el-icon-warning"></i>单个文件大小请勿超过2MB</p>-->
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="4" class="textarea">
            <p>领导签批：</p>
            <el-input type="textarea" :rows="8" disabled></el-input>
          </td>
        </tr>
        <tr>
          <td colspan="4" class="textarea">
            <p>阅办签字：</p>
            <el-input type="textarea" :rows="8" disabled></el-input>
          </td>
        </tr>

        </tbody>
      </table>

    </section>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import receiptAPI from '@/api/receipt/receipt'
  export default {
    name: "Register",
    data() {
      return {
        receipt: {
          archiveType: "",
          codeName: "",
          codeNo: 1,
          codeYear: '',
          docLevel: "",
          docTitle: "",
          fileList: [],
          receiptContent: "",
          receiptDate: "",
          receiptType: "",
          receiptUnit: "",
          storePeriod: ""
        },
        saveLoading:false,
        help:{
          codeName:'',
          uploadFileList:[]
        },
        archiveTypeList:[],
        codeNameList:[],
        docLevelList:[],
        receiptTypeList:[],
        storePeriodList:[]
      }
    },
    computed: {
      ...mapGetters([
        'uploadHost'
      ]),
    },
    created() {
      this.init()
      this.getArchiveTypeList()
      this.getCodeNameList()
      this.getDocLevelList()
      this.getReceiptTypeList()
      this.getStorePeriodList()
      this.getCodeNo()
      this.receipt.codeYear = new Date().getFullYear()
      this.receipt.receiptDate = new Date().Format('yyyy-MM-dd')
    },
    methods: {
      getArchiveTypeList(){
        receiptAPI.getGuiDangFenLeiList().then(res=>{
          this.archiveTypeList = res.records
          this.receipt.archiveType = this.archiveTypeList[0].pname
        })
      },
      getCodeNameList(){
        receiptAPI.getLaiWenHaoList().then(res=>{
          this.codeNameList = res.records
        })
      },
      getDocLevelList(){
        receiptAPI.getReceiptLevel().then(res=>{
          this.docLevelList = res.records
          this.receipt.docLevel = this.docLevelList[0].pname
        })
      },
      getReceiptTypeList(){
        receiptAPI.getLaiWenLeiXingList().then(res=>{
          this.receiptTypeList = res.records
          this.receipt.receiptType = this.receiptTypeList[0].pname
        })
      },
      getStorePeriodList(){
        receiptAPI.getBaoGuanQiXianList().then(res=>{
          this.storePeriodList = res.records
          this.receipt.storePeriod = this.storePeriodList[0].pname
        })
      },
      getCodeNo(){
        receiptAPI.getCodeNo().then(res=>{
          this.receipt.codeNo = res.result
        })
      },
      codeNameChange(){
        console.log(this.help.codeName)
        const year = new Date().getFullYear()
        this.receipt.codeName = this.help.codeName+'('+year+')号'
      },
      init(){
        this.receipt.codeYear = new Date().getFullYear()
      },
      save(){
        this.saveLoading = true
        receiptAPI.save(this.receipt).then(res=>{
          this.saveLoading = false
          this.$message.success('保存成功')
          this.$router.push('/receipt/receipt-handle')
        }).catch(err=>{
          console.log(err)
        })
      },
      valid(){
        console.log(this.receipt)
        if(this.receipt.docTitle === ''){
          this.$message.warning('请填写收文标题')
          return false
        }
        if(this.receipt.codeYear === ''){
          this.$message.warning('请填写收文编号')
          return false
        }
        if(this.receipt.codeNo === ''){
          this.$message.warning('请填写收文编号')
          return false
        }

/*        if(this.receipt.archiveType === -1){
          this.$message.warning('请选择归档分类')
          return false
        }*/
        if(this.receipt.codeName === ''){
          this.$message.warning('请填写来文号')
          return false
        }
/*        if(this.receipt.docLevel === -1){
          this.$message.warning('请选择等级')
          return false
        }*/
        if(this.receipt.receiptUnit === ''){
          this.$message.warning('请填写来文单位')
          return false
        }
/*        if(this.receipt.receiptType === -1){
          this.$message.warning('请选择来文类型')
          return false
        }*/


/*        if(this.receipt.storePeriod === -1){
          this.$message.warning('请选择保管期限')
          return false
        }
        if(this.receipt.receiptType === -1){
          this.$message.warning('请选择来文类型')
          return false
        }*/

        this.save()
      },
      beforeUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.info('文件大小请勿超过 2MB!')
        }
        return isLt2M
      },
      uploadSuccess(res, file){
        this.receipt.fileList.push(res.result)
      }
    }
  }
</script>

<style lang="scss">

  .register {
    .el-textarea__inner {
      border-radius: 1px;
    }
  }

</style>

<style scoped lang="scss">
  $color : #666666;
  $width : 800px;



  .view-header {
    background-color: white;
    padding: 10px 0;
    .header-container {
      width: $width;
      margin: 0 auto;
    }
  }

  .view-container {
    padding: 0;
  }

  .register {
    background-color: #E8EDF7;
    padding-bottom: 60px;
  }



  .section {
    margin: 0 auto;
    width: $width;
    background-color: white;
    padding: 80px;

    table {
      width: 100%;
      border: 1.5px solid $color;
      font-size: 13px;
      color: $color;
      /*border-collapse: collapse;*/
      border-spacing: 0;

      th, td {
        padding: 0;
      }

      td {
        border-left: 1px solid $color;
        border-top: 1px solid $color;
      }

      td {
        padding: 10px 10px 5px;
        text-align: center;
      }

      td.wen-title {
        padding: 10px 5px;
        width: 15%;
      }

      /*.file-td {
        text-align: left;
        .upload-demo,p {
          display: inline-block;
          margin: 10px;
        }
        p {
          font-size: 12px;
          color:gray;
        }
      }*/
      .upload-wrap {
        text-align: left;
        /*display: flex;*/
        .upload-demo,p {
          margin: 10px;
        }
        .el-upload__tip {
          padding-left: 4px;
          i {
            margin-right: 5px;
          }
          font-size: 12px;
          color:gray;
          margin-top: 18px;
        }
      }

    }

    input {
      width: 100%;
      border: none;
      outline: none;
      border-bottom: 1px dashed $color;
      padding: 3px;
      border-radius: 0;
    }

    select {
      min-width: 100%;
      margin-right: 20px;
      border: none;
      outline: none;
      border-bottom: 1px dashed $color;
      padding: 1px;
      border-radius: 0;
    }


    .swbh {
      input {
        width: 40%;
        text-align: center;
      }
    }

    .lai-wen {
      text-align: left;

      & > div {
        display: inline-block;
      }

      .d1 {
        width: 70%;
        text-align: left;

        input {
          width: 100%;
        }
      }

      .d2 {
        text-align: right;

        select {
          width: 30%;
        }
      }
    }

    .textarea {
      text-align: left;
      padding: 5px;

      p {
        line-height: 25px;
      }

      .el-textarea__inner {
        border: 1px dashed $color;
      }
    }
  }


</style>
